<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
     <!-- 
           css属性
             color 文字的颜色  属性值 red #0f0 rgb(0,0,0) 取值 0-255,用逗号隔开
                注意：要么是三位，要么是六位，因为两两相同可以简写

            font-size 文字的大小 默认的16px  网站的常用的字体大小 12px 14px
                em 单位(倍数)
                
            font-family:字体
                注意：如果是中文记得加双引号
                    多个字体用逗号隔开
                    英文如果有空格（词组）也要加双引号

            text-indent: 首行缩进 2em 属性值可以取负值
            font-weight 是否加粗  bold bolder 600-900 加粗 normal(正常的) 100-500不加粗 
                注意：数字不加单位

            font-style 是否倾斜  normal(正常的) 取消倾斜 italic oblique 倾斜  
       
            text-align: 文本的水平对齐  左left 中center(用的最多) 右right  justify两端对齐，必须是两行或者两行以上
           vertical-align: 垂直居中 top上 middle中 bottom下 元素类型必须是inline-block

           line-height:行高 上下留出的间距是一样的 行高的单位如果不加表示的是倍数
           text-decoration: none;  去掉超链接的下划线
           text-decoration: underline; 添加下划线 line-through 删除线 overline 上划线
   
   

           letter-spacing 字间距 
           word-spacing 词间距


           扩展
               1, 字体简写注意顺序
                    font:加粗 倾斜 字体大小/行高 字体;
               2，必须要有字体和字体大小，否则不能简写

        -->
     <style>
         .box{
             text-decoration: none;
             color: #333;
         }
         .box:hover{
            color:red;
            text-decoration: underline;
         }
         p{
             text-decoration: line-through;
             word-spacing: 40px;
             color:red;
             font-size:20px;
             font-family: 'Courier New', Courier, monospace;
             font-weight: bold;
             font-style: italic;
             line-height: 60px;
         }

         /* 鼠标划上要链接加下划线，并且要文字变成红色 */
     </style>
</head>
<body>
  <a href="#" class="box">超超超级能吃</a>  
  <a href="#">干啥不行，干饭第一名</a>
  <p>鼠标划上要链接加下划线，并且要文字变成红色</p>
</body>
</html>